<template>
	<div>
		<l-page :page.sync="queryParams.pageNum" :page-size.sync="queryParams.pageSize" :total="total" @getList="getList">
			<!--header插槽 用于表格搜索-->
			<el-form slot="header" ref="queryForm" :inline="true" :model="queryParams" label-width="75px">
				<el-form-item label="用户ID:" prop="uuid">
					<el-input v-model.trim="queryParams.uuid" clearable maxlength="6" placeholder="请输入用户ID" show-word-limit />
				</el-form-item>
				<el-form-item label="手机号码:" prop="mobile">
					<el-input v-model.trim="queryParams.mobile" clearable maxlength="11" placeholder="请输入手机号码" show-word-limit />
				</el-form-item>
				<l-Province v-model="queryParams.city" title="所在地区:" prop="city" placeholder="请选择所在地区"></l-Province>
			</el-form>
			<!--按钮插槽 -->
			<template slot="options">
				<l-search @search="handleQuery" @refresh="resetQuery" />
				<el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增用户 </el-button>
			</template>
			<!--统计卡片插槽-->
			<div slot="card" class="mb-[24px] flex items-center">
				<l-statistical-card left-name="用户总数" :left-value="userStatistics.totalCount" :right-value="userStatistics.lastTotalCount" />
			</div>
			<!-- 返回到上一页面-->
			<l-back class="mr-[15px]" />
			<!--  步骤条-->
			<l-Steps :value="1" :data="[{ title: '步骤一' }, { title: '步骤二' }, { title: '步骤三' }]"></l-Steps>
			<!--高德地图-->
			<LMap :center.sync="mapCenter" width="100%" @select="mapSelect" @location="mapLocation"></LMap>
			<!-- 默认插槽表格-->
			<el-table v-loading="loading" :data="tableData" stripe @sort-change="handleSortChange">
				<LTableColumn prop="uuid" type="index" label="序号" width="50"> </LTableColumn>
				<LTableColumn prop="uuid" label="用户ID" />
				<LTableColumn prop="mobile" label="手机号码" />
				<LTableColumn prop="referrerUuid" label="邀请人ID" />
				<LTableColumn prop="createTime" type="time" label="注册时间" />
				<LTableColumn type="options" :width="tableAction">
					<template slot-scope="{ row }">
						<el-button type="primary">编辑 </el-button>
						<el-button type="primary">详情 </el-button>
					</template>
				</LTableColumn>
			</el-table>
		</l-page>
		<!-- 弹窗 -->
		<l-dialog v-model="showCreate" :title="dialogTitle" width="453px" @close="handleCancel" @formClose="handleCancel" @formSubmit="handleSubmitForm">
			<div class="text-center text-[16px] pb-[40px]">这是一个演示弹窗</div>
		</l-dialog>
		<!-- 组件参数介绍-->
		<TableDesc />
	</div>
</template>

<script>
import { listUser, queryUserStatistics } from '@/api/mall/user';
import tableMixins from '@/mixins/table';
import TableDesc from './components/TableDesc';
export default {
	name: 'Table',
	components: {
		TableDesc,
	},
	mixins: [tableMixins],
	data() {
		return {
			tableData: [],
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				uuid: null,
				mobile: null,
				city: [],
			},
			total: 0,
			loading: true,
			userStatistics: {
				totalCount: 0,
				lastTotalCount: 0,
			},
			//弹窗
			showCreate: false,
			dialogTitle: '新增',
			//地图
			mapCenter: [116.407387, 39.904179],
		};
	},
	created() {
		this.getList();
		this.queryUserStatistics();
	},
	methods: {
		queryUserStatistics() {
			queryUserStatistics().then((res) => {
				this.userStatistics = res.data;
			});
		},
		getList() {
			this.loading = true;
			listUser(this.queryParams)
				.then((response) => {
					this.tableData = response.data.records;
					this.total = response.data.total;
				})
				.finally(() => {
					this.loading = false;
				});
		},
		handleQuery() {
			this.queryParams.pageNum = 1;
			this.getList();
		},
		resetQuery() {
			//重置时间
			this.resetForm('queryForm');
			this.handleQuery();
		},
		handleCreate() {
			this.showCreate = true;
		},
		handleSubmitForm() {
			this.msgSuccess('保存成功');
			this.showCreate = false;
		},
		handleCancel() {
			this.showCreate = false;
		},
		mapSelect(e) {
			console.log(e, '搜索后选中的数据');
		},
		mapLocation(e) {
			console.log(e, '首次定位以及点击定位按钮后的数据');
		},
	},
};
</script>

<style scoped lang="scss"></style>
